<template>
  <view class="home-main">
    <hx-navbar ref="hxnb" :config="config" @clickBtn="onClickBtn" />
    <view class="cont">
      <view class="top">
        <u--form labelPosition="left" :model="searchForm" :rules="searchFormRules" ref="searchForm" labelWidth="140" style="padding-bottom: 16rpx">
          <!-- <u-form-item label="考试:" prop="recordsName" borderBottom @click="showRecords = true;">
            <u--input v-model="searchForm.recordsName" border="bottom" readonly placeholder="请选择考试" @click="showRecords = true;"></u--input>
            <u-icon slot="right" name="arrow-right" @click="showRecords = true;"></u-icon>
          </u-form-item> -->
           <u-form-item label="身份证号:" prop="studentIdcard" borderBottom>
            <u--input v-model="searchForm.studentIdcard" border="none" placeholder='请输入身份证号'></u--input>
          </u-form-item>
        </u--form>
        <u-button @click="submit" color="linear-gradient(to right, #00b99e, #00e5c3)" shape="circle" text="查询" ></u-button>
      </view>
      <view class="bottom1">
        <ua-table
          :columns="column"
          :data="data"
          :stripe="true"
          :border="true"
          :headerBold="true"
          headerBgColor="#f3f6f9"
          headerColor="#333"
          height="calc(100vh - 480rpx)"
          style="border:1px solid #eee"
          v-if="page.total > 0"
        >
        <template #default="{row, col, index}">
          <block v-if="col.slot == 'handle'">
            <text style="color: #09f;text-decoration: underline;" @click.stop="getReportPdf(row, index)">下載</text>
          </block>
        </template>
        </ua-table>
        <view class="page-box" v-if="page.total > 0">
          <page-pagination style="display: flex;" v-if="page.total > 0" class="test-pagination" :numAround="true" :total="page.total" layout="page,prev,next,limit,total"
            :pageSizes="[20,50,100,500]" :pageSize="page.limit" @sizeChange="sizeChange" @change="pageChange" color="#09f">
          </page-pagination>
        </view>
        <view v-if="page.total === 0" class="noData">
          <view class="icon iconfont icon-zanwushuju1"></view>
          暂无数据
        </view>
      </view>
    </view>
    <view>
      <u-modal :show="loadingShow" title="考试报告" :showConfirmButton="false" :showCancelButton="false" width="400rpx">
        <view class="slot-content">
          <view style="color: #333;display:flex;align-items: center;justify-content: center;padding: 2rpx 0 10rpx 0;">下载中...</view>
        </view>
      </u-modal>
    </view>
    <!-- <u-picker confirmColor='#26A69A' :show="showRecords" keyName="name" :columns="recordsList" title="请选择考试" description="考试" @confirm='recordsSelect' @cancel="showRecords = false" @close="showRecords = false" itemHeight='80'>
    </u-picker> -->
    <u-notify ref="uNotify" message="Hi uView"></u-notify>
  </view>
</template>
<script>
import hccmConfig from "@/common/hccm-config.js"
import mRequest from "@/api/index";
export default {
  data() {
    return {
      config: {
        title: "下载考试报告",
        color: "#ffffff",
        back: true,
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#00b99e", "#25bba4", "#00e5c3", "#06eeca"]],
        // 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 onPageScroll 事件
        slideBackgroundColor: [0, ["#a9a1ff", "#6970ff", "#ff55ff", "#ff9999"]],
        // 状态栏 ，数组则为滑动变色
        statusBarBackground: ["", "#ffffff"],
        rightButton: [
          // {
          //   key: 'btn1',
          //   icon: '&#xe651;',
          //   position: 'left'
          // },
          // {
          //     key: 'btn2',
          //     icon: '&#xe64c;',
          //     position: 'left'
          // },
          // {
          //   key: "btn3",
          //   icon: "&#xe6eb;",
          //   position: "left"
          // }
        ]
      },
      searchForm:{
        recordsName: '',
        recordsId: '',
        studentIdcard: ''
      },
        // studentIdcard: '61012119940505646X',
      searchFormRules: {
        recordsName: {
					type: 'string',
					required: true,
					message: '请选择考试',
					trigger: ['blur', 'change']
				},
				studentIdcard: {
					type: 'string',
					required: true,
					message: '请填写身份证号',
					trigger: ['blur', 'change']
				},
      },
      recordsList: [[]],
      showRecords: false,
      studentInfo: {},
      page:{
        limit: 20,
        page: 1,
        total: 0
      },
      column:[
        { type:'index', align: 'center',fixed: false,width:70 },
        { prop: 'recordsName', label: '考试名称', align: 'center',fixed: false, minwidth:160,},
        { slot: 'handle', prop: 'handle', label: '操作', width:70, align: 'center',fixed: 'right'},
      ],
      data:[],
      loadingShow: false,
    };
  },
  onLoad(){
    // this.getListTabulation()
  },
  onPageScroll(e) {
    // 重点，用到滑动切换必须加上
    // this.$refs.hxnb.pageScroll(e);
  },
  methods: {
    // 提交 查询
    submit(){
      if(!this.searchForm.studentIdcard){
        this.$refs.uNotify.show({
            top: 10,
            type: 'error',
            message: '请先输入身份证号',
            duration: 1000 * 1,
            fontSize: 20,
            safeAreaInsetTop:true
        })
        return
      }
      let params = {
        // recordsId: this.searchForm.recordsId,
        studentIdcard: this.searchForm.studentIdcard,
        examStatus: 1, //只有未开始的才能扫码 1（考试结束）0（未开始）
        current: this.page.page,
        size: this.page.limit,
      }
      mRequest.getRecordsList(params).then(res=>{
        console.log('res', res)
        if(res.code === 0){
          this.data = res.page.records
          this.data.map(v => {
            v.studentIdcard = this.searchForm.studentIdcard
          })
          this.page.total = res.page.total
        }
        console.log(res)
      })
    },
    // 查看并下载
    getReportPdf(val){
      let params = {
        recordsId: val.id,
        studentIdcard: val.studentIdcard,
      }
      this.loadingShow = true
      this.$axios({
        url: `${hccmConfig.HCCM_HOST_URL}/osce-api/excel/student/getRecordsReport`,
        method: 'post',
        responseType: 'blob',
        params: params
      }).then(({ data }) => {
        var binaryData = []
        binaryData.push(data)
        let blob = new Blob(binaryData, {
          type: ' application/msword'
        })
        setTimeout(() => {
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, 'link')
          } else {
            const link = document.createElement('a')
            console.log(window.URL.createObjectURL)

            link.download = `${val.recordsName}-考试报告`
            link.style.display = 'none'
            link.href = window.URL.createObjectURL(blob)
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
            this.loadingShow = false
            this.$refs.uNotify.show({
              top: 10,
              type: 'success',
              message: '下载成功',
              duration: 1000 * 1,
              fontSize: 20,
              safeAreaInsetTop:true
            })
          }
        })
      }).catch(err => {
        console.log(err)
      })
    },
    onClickBtn(data) {
      //console.log(data);
      uni.showToast({
        title: `key为 ${data.key} 的按钮`,
        icon: "none",
        duration: 1300
      });
    },
    recordsSelect(e){
      console.log(e.value[0])
      this.searchForm.recordsId = e.value[0].value 
      this.searchForm.recordsName = e.value[0].name 
      this.showRecords = false
    },
    // 获取考试列表
    getListTabulation(){
      let params = {
        limit: 10000,
        page: 1,
        examStatus: '0',// 0是未考
        orderSql: 'creat_date desc'
      }
      mRequest.listTabulation(params).then(res=>{
        console.log(res.page.records)
        let recordsList = []
        if(res.page.records.length > 0){
          res.page.records.map(v => {
            recordsList.push({
              name: v.recordsName,
              value: v.id
            })
          })
          this.searchForm.recordsId = res.page.records[0].id 
          this.searchForm.recordsName = res.page.records[0].recordsName 
          this.recordsList = [recordsList]
          // this.submit()
        }
      })
    },
  }
};
</script>
<style lang='scss'>
.home-main {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  /deep/.u-modal__content{
    padding: 10px !important;
  }
  .cont {
    height: calc( 100vh - 80rpx);
    display: flex;
    flex-direction: column;
    .top {
      margin: 20rpx;
      background: #00b99e10;
      padding: 20rpx;
      border-radius: 8rpx;
    }
  }
}
.noData{
  height: 150px;
  width: 100%;
  background: #f5f5f5;
  color: #999;
  border-radius: 8px;
  // border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 10px;
  .icon{
    font-size: 60px;
    margin-bottom: 10px;
  }
}
.contentBox{
  height: calc( 100vh - 300px);
  overflow: auto;
}
.bottom{
  margin: 20rpx;
  background: #00b99e10;
  padding: 20rpx;
  border-radius: 8rpx;
  .title{
    padding-bottom: 10rpx;
    font-weight: 600;
    color: #333;
    font-size: 32rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .inner{
    border: 1px solid #00b99e80;
    border-radius: 10rpx;
    .line{
      display: flex;
      justify-content: center;
      align-items: stretch;
      font-size: 30rpx;
      font-weight: 400;
      .line-left{
        width: 180rpx;
        // min-height: 140rpx;
        color: #333;
        border-bottom: 1px solid #00b99e80;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      .line-right{
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        min-height: 100rpx;
        padding: 0 10rpx;
        border-left: 1px solid #00b99e80;
        border-bottom: 1px solid #00b99e80;
        .qr{
          height: 300rpx;
          width: 300rpx;
        }
      }
    }
    .line:last-of-type{
      .line-left{
        border-bottom: none;
        height: 400rpx;
      }
      .line-right{
        border-bottom: none;
        height: 400rpx;
        display: flex;
        align-content: center;
        justify-content: center;
      }
    }
  }
  .down{
    width: 100%;
    padding: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .u-text{
      justify-content: center !important;
    }
  }
}
.bottom1{
  margin: 20rpx;
  background: #00b99e10;
  padding: 20rpx;
  border-radius: 8rpx;
  flex: 1;
  // height: 100%;
}

</style>